<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/tuwowo_1.jpg") ?>" alt="季高兔窝窝乐园全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/tuwowo_2.jpg") ?>" alt="宇宙探险项目" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/tuwowo_3.jpg") ?>" alt="乐园特色游乐设施" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">研学设计思路</h3>
                    <div class="text-gray-600 space-y-4">
                        <p class="text-indent-8">&emsp;&emsp;结合学校、家庭和社会三方有效教学需求点，以青少年成长励志教育为中心，以科技科普为研学课题点，通过以体验式教育为基础，以创新性、知识性、趣味性为主导，引导学生以研学课题组的方式在活动中通过自主学习，合作探究，研学知识，提升能力，达到知行统一，教学合一。</p>
                    </div>

                    <h3 class="text-xl font-bold text-gray-800 mb-2 mt-6">基地介绍</h3>
                    <div class="text-gray-600 space-y-4">
                        <p class="text-indent-8">&emsp;&emsp;长沙・季高兔窝窝乐园，是来自上海 “迪士尼” 度假区的超人气、超颜值的主题乐园，位于长沙市芙蓉区浏阳河畔。是目前中国最大的亲子主题乐园，乐园占地 10 万平米，投资 2.2 亿元。由中国、丹麦、法国、德国、荷兰、泰国等多国设计师团队共同打造，是湖南省第一家全面满足欧洲游乐设备安全标准的亲子主题乐园。乐园内有超过 100 种从丹麦、法国、德国和荷兰进口的游乐产品，为小朋友们打造了 3 大 IP 主题片区、19 大功能游戏组团，超过 130 种游乐产品和无限可能的创意玩法。</p>
                        <p>&emsp;&emsp;最大推荐接待量：300人</p>
                        <p>&emsp;&emsp;课程一览：宇宙探险、抢滩登陆、跳出重围、披荆斩棘、智勇冲关等。</p>
                    </div>
                </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 国际化设计 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 国际化设计团队</h4>
                    <p class="text-gray-600">&emsp;&emsp;由中、丹、法、德、荷、泰等多国设计师共同打造，融合国际先进设计理念，提供独特的视觉与游玩体验。</p>
                </div>
                <!-- 安全标准 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 欧洲安全标准</h4>
                    <p class="text-gray-600">&emsp;&emsp;湖南省第一家全面满足欧洲游乐设备安全标准的亲子主题乐园，为孩子们提供安全可靠的游玩环境。</p>
                </div>
                <!-- 多元游乐项目 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 多元游乐项目</h4>
                    <p class="text-gray-600">&emsp;&emsp;超过130种游乐产品，涵盖科技科普、体能锻炼、团队协作等多个领域，全面培养孩子综合素质。</p>
                </div>
            </div>

            <!-- 一日研学课程安排 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">【季高兔窝窝乐园研学之旅】</h2>
                <div class="overflow-x-auto">
                    <table class="w-full border-collapse">
                        <colgroup>
                            <col style="width: 15%;">
                            <col style="width: 15%;">
                            <col style="width: 70%;">
                        </colgroup>
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                                <th class="text-left border border-gray-300 py-3 px-4 font-bold">课程安排</th>
                                <th class="text-left border border-gray-300 py-3 px-4 font-bold">课程内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">08:00 - 09:00</td>
                                <td class="border border-gray-300 py-3 px-4">研学启程</td>
                                <td class="border border-gray-300 py-3 px-4">1. 学校集合，由研学导师和学校老师带队乘车前往研学基地。<br>2. 到达研学基地后，要求研学导师以班级为单位，带领同学们有序进入研学基地。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">09:00 - 09:30</td>
                                <td class="border border-gray-300 py-3 px-4">入园集合</td>
                                <td class="border border-gray-300 py-3 px-4">清点人数，排队入园。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">09:30 - 10:20</td>
                                <td class="border border-gray-300 py-3 px-4">宇宙探险</td>
                                <td class="border border-gray-300 py-3 px-4">体验宇宙迷宫、轨道摇马、光影转盘、旋转木马等项目，合作探索、增加勇气、新奇体验、惊喜不断。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">10:20 - 11:00</td>
                                <td class="border border-gray-300 py-3 px-4">抢滩登陆</td>
                                <td class="border border-gray-300 py-3 px-4">体验月壤研究地、光年滑索、沙漠小屋、沙水工程局等项目，多感官探索、创意游戏、挖掘快乐、合作玩耍。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">11:00 - 12:00</td>
                                <td class="border border-gray-300 py-3 px-4">跳出重围</td>
                                <td class="border border-gray-300 py-3 px-4">体验海浪跳跳毯、兔子城堡等项目，欢乐探索、勇敢攀爬、户外运动、创意无限。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">12:00 - 12:30</td>
                                <td class="border border-gray-300 py-3 px-4">披荆斩棘</td>
                                <td class="border border-gray-300 py-3 px-4">体验欢乐秋千、征服双子山、碰碰车等项目，培养勇气、锻炼力量、挑战自我、合作共赢。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">12:30 - 13:30</td>
                                <td class="border border-gray-300 py-3 px-4">午餐</td>
                                <td class="border border-gray-300 py-3 px-4">午餐自备。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">13:30 - 14:30</td>
                                <td class="border border-gray-300 py-3 px-4">智勇冲关</td>
                                <td class="border border-gray-300 py-3 px-4">体验趣味篮球场、旋转盘、跷跷板、旋转碗，趣味体验、多样运动、创意比赛、合作探索。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">14:30 - 15:00</td>
                                <td class="border border-gray-300 py-3 px-4">梦想起航</td>
                                <td class="border border-gray-300 py-3 px-4">体验草垛（捉迷藏）、街区巡逻车等项目。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">15:00 - 16:00</td>
                                <td class="border border-gray-300 py-3 px-4">拾秋</td>
                                <td class="border border-gray-300 py-3 px-4">收集 “秋” 所代表的丰收与成熟，用自己喜欢的方式捡起秋天，发挥想象力，制作独特的植物画作。</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">16:00 - 17:00</td>
                                <td class="border border-gray-300 py-3 px-4">快乐返程</td>
                                <td class="border border-gray-300 py-3 px-4">在指定的时间集合出园，根据学校安排返程。</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">同学们，季高兔窝窝乐园的奇妙研学之旅已经准备好啦！在这里，你们可以体验国际化的游乐设施，挑战自我，培养团队合作精神，收获满满的成长和快乐。快来一起开启这场精彩的研学冒险吧！</p>
            </div>
        </div>
    </div>

    <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['教育性', '互动性', '实践性', '创新性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(51, 153, 102, 0.2)',
            borderColor: 'rgba(51, 153, 102, 1)',
            borderWidth: 2,
            data: [8, 9, 8, 9, 9] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>